<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Section - Generate Timeslot</title>
<!-- <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> -->
<jsp:include page="../includeFiles.jsp" ></jsp:include>

<link rel="stylesheet" href="../css/ui/jquery-ui-1.10.4.custom.min.css">
<link rel="stylesheet" href="../css/ui/jquery-ui-timepicker-addon.css">
<script src="<%=request.getContextPath()%>/public/js/ui/jquery.ui.core.js"></script>
<script src="<%=request.getContextPath()%>/public/js/ui/jquery.ui.widget.js"></script>
<script src="<%=request.getContextPath()%>/public/js/ui/jquery.ui.datepicker.js"></script>
<script src="<%=request.getContextPath()%>/public/js/ui/jquery-ui-timepicker-addon.js"></script>
<script src="<%=request.getContextPath()%>/public/js/ui/jquery-ui-sliderAccess.js"></script>
<script>
$(document).ready(function() {
		$('#start_time').timepicker({
			showLeadingZero: false,
	        'hourMin': 6,
	        'hourMax': 18,
	        stepMinute: 5,
            'onSelect': function() {
            	$('#end_time').timepicker('option', 'minTime', $(this).val());
            	$('#recess1_time').timepicker('option', 'minTime', $(this).val());
            	$('#recess2_time').timepicker('option', 'minTime', $(this).val());
      		}
	    });
	    $('#end_time').timepicker({
	       showLeadingZero: false,
	       'hourMin': 6,
	       'hourMax': 18,
	       stepMinute: 5,
	       'onSelect': function() {
           		<%--$('#start_time').timepicker('option', 'maxTime', $(this).val()); --%>
           		$('#recess1_time').timepicker('option', 'maxTime', $(this).val());
            	$('#recess2_time').timepicker('option', 'maxTime', $(this).val());
     		}
	 	});
	    $('#lecture_duration').timepicker({
	    	showHour: false,
	    	timeFormat: "mm",
    		stepMinute: 5
	 	});
	    $('#recess1_duration').timepicker({
	    	showHour: false,
	    	timeFormat: "mm",
	    	stepMinute: 5
	 	});
	    $('#recess2_duration').timepicker({
	    	showHour: false,
	    	timeFormat: "mm",
	    	stepMinute: 5
	 	});
	    $('#recess1_time').timepicker({
			showLeadingZero: false,
	        'hourMin': 6,
	        'hourMax': 18,
	        stepMinute: 5,
            'onSelect': function() {
            	<%--$('#end_time').timepicker('option', 'minTime', $(this).val()); --%>
      		}
	    });
	    $('#recess2_time').timepicker({
			showLeadingZero: false,
	        'hourMin': 6,
	        'hourMax': 18,
	        stepMinute: 5,
            'onSelect': function() {
            	<%--$('#end_time').timepicker('option', 'minTime', $(this).val()); --%>
      		}
	    });
});
</script>

<body class="left-sidebar">

<!-- Session check : user logged in or not/ press back button -->
<jsp:include page="../common/checkSession.jsp"></jsp:include>
<jsp:include page="../common/checkSectionRole.jsp" />
	
	<!-- Wrapper -->
	<div id="wrapper">

		<!-- Content -->
		<div id="content">
			<div id="content-inner">

				<!-- Login -->
						<div id="login_content">
						<header>
							<h2>Generate Timeslot</h2>
						</header>
						
						<span class="error_msg">${null_values}</span>
						<span class="error_msg">${timeslotAlreadyExists}</span>
						<span class="success_msg">${timeslotAdded}</span>
						<span class="error_msg">${timeslotNotAdded}</span>
						<div class="submit_errors_msg">
							<ul>
								<li id="submit_is_field_empty" class="submit_errors">All fields are required. You must select at least 1 from drop-down.</li>
							</ul>
						</div>
						<form name="generate_timeslot" action="${pageContext.request.contextPath}/AddTimeSlotsServlet" method="post" onsubmit="return checkFormErrors();">
							
							<!-- Start Time -->
							<div>
								<label>Start Time: <span class="error_msg">*</span></label>
								<input id="start_time" name="start_time" type="text" placeholder="Start Time" value="" tabindex="1">
							</div>
							<!-- End Time -->
							<div>
								<label>End Time: <span class="error_msg">*</span></label>
								<input id="end_time" name="end_time" type="text" placeholder="End Time" value="" tabindex="2">
							</div>
							<!-- Lecture MInutes -->
							<div>
								<label>Lecture Duration: <span class="error_msg">*</span></label>
								<input id="lecture_duration" name="lecture_duration" type="text" placeholder="Lecture Duration" tabindex="3">
							</div>
							<!-- Recess-1 Details -->
							<div>
								<label>Recess-1 Duration: <span class="error_msg">*</span></label>
								<input id="recess1_duration" name="recess1_duration" type="text" placeholder="Recess-1 Duration" tabindex="4">
							</div>
							<div>
								<label>Recess-1 Time: <span class="error_msg">*</span></label>
								<input id="recess1_time" name="recess1_time" type="text" placeholder="Recess-1 Time" tabindex="5">
							</div>
							<!-- Recess-2 Details -->
							<div>
								<label>Recess-2 Duration: <span class="error_msg">*</span></label>
								<input id="recess2_duration" name="recess2_duration" type="text" placeholder="Recess-2 Duration" tabindex="6">
							</div>
							<div>
								<label>Recess-2 Time: <span class="error_msg">*</span></label>
								<input id="recess2_time" name="recess2_time" type="text" placeholder="Recess-2 Time" tabindex="7">
							</div>
							
										
							<div>	
								<input type="submit" value="Generate Time Slot" class="button" tabindex="8">
							</div>
						</form>
					</div>
			
			</div>
		</div>

		<!-- Sidebar -->
		<div id="sidebar">

			<!-- Sidebar Header - Logo & Name -->
			<jsp:include page="../common/sidebarHeader.jsp" ></jsp:include>

			<jsp:include page="sectionMenu.jsp" />
							
			<!-- Sidebar Footer Content -->
			<jsp:include page="../common/sidebarFooter.jsp" />

		</div>

	</div>
	<script type="text/javascript">
		$(function(){
			$("#generateTimeslot").addClass("current_page_item");
		});
	</script>
	
	<script type="text/javascript">
	$(".submit_errors_msg").hide();
	$(".submit_errors").hide();
	
	function checkFormErrors(){
		if(isAnyFieldEmpty($('#start_time'),$('#end_time'),$('#lecture_duration'),$('#recess1_duration'),$('#recess1_time'),$('#recess2_duration'),$('#recess2_time'))){
			return true;
		}else{
			return false;	
		}		
	}

		
	</script>
	</body>
</html>